<template>
  <div id="header">
    <!-- 索引 -->
    <div class="content">
      <div class="left"><a href="/">公益星</a></div>
      <div class="right">
        <!-- <router-link to="/" @click="routerTo('/')">首页</router-link> -->
        <!-- <router-link to="/about" @click="routerTo('/about')"
          >关于我们</router-link
        > -->
        <!-- <router-link to="/welfare" @click="routerTo('/welfare')"
          >公益事项</router-link
        >
        <router-link to="/news" @click="routerTo('/news')">
          新闻资讯</router-link
        >
        <router-link to="/contact" @click="routerTo('/contact')"
          >联系我们</router-link
        > -->
        <a
          href="/"
          :class="{ 'router-link-exact-active': $route.name === 'CHome' }"
          >首页</a
        >
        <a
          href="/about"
          :class="{ 'router-link-exact-active': $route.name === 'CAbout' }"
          >关于我们</a
        >
        <a
          href="/welfare"
          :class="{ 'router-link-exact-active': $route.name === 'CWelfare' }"
          >公益事项</a
        >
        <a
          href="/news"
          :class="{ 'router-link-exact-active': $route.name === 'CNews' }"
          >新闻资讯</a
        >
        <a
          href="/contact"
          :class="{ 'router-link-exact-active': $route.name === 'CContact' }"
          >联系我们</a
        >
      </div>
    </div>
    <!-- 切换控件 -->
    <template v-if="isShowCarousel">
      <div class="toggle">
        <div class="btn-left btn" @click="throttleSwitching(false)">
          <i class="iconfont icon-xiangzuo"></i>
        </div>
        <div class="btn-right btn" @click="throttleSwitching()">
          <i class="iconfont icon-xiangyou1"></i>
        </div></div
    ></template>
    <!-- 含有轮播 -->
    <template v-if="isShowCarousel">
      <div class="banner bannerImg">
        <div class="bannerImgs">
          <div class="banner-view" ref="targetBanner">
            <template v-for="(item, index) in infoImgs.CHome" :key="item">
              <div class="banner-item">
                <img :src="item" />
                <!-- 标题 -->
                <h2 class="tit">
                  <div class="care">CARE</div>
                  <div class="titupe">
                    {{ infoImgs.CHometTit[index]?.titUpe }}
                  </div>
                  <div class="titup">
                    {{ infoImgs.CHometTit[index]?.titUp }}
                  </div>
                  <div class="titdown">
                    {{ infoImgs.CHometTit[index]?.titDown }}
                  </div>
                  <div class="titdowne">
                    {{ infoImgs.CHometTit[index]?.titDowne }}
                  </div>
                </h2>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <!-- 非轮播 -->
    <template v-else>
      <div class="banner">
        <img :src="currimgSrc" alt="" />
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { RouteRecordName } from 'vue-router'
import throttle from '@/utils/throttl'

const route = useRoute()

// 是否显示轮播
const isShowCarousel = ref<boolean>(true)
// 当前背景图片 非轮播
let currimgSrc = ref<string>()
// 操控轮播元素
const targetBanner = ref<InstanceType<typeof Element>>()
// 当前轮播下标
const currIndex = ref<number>(1)
// 自动轮播的定时器
let timer = ref<any>(null)
// 获取整个Header组件
// const HeaderRef = ref<InstanceType<typeof Element>>()

// 模拟背景图片
const infoImgs = {
  name: '',
  CHome: [
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg48zlggYo5srWpwQwgA84wAc.jpg',
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg48zlggYooPjXFTCADzjABw.jpg',
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg48zlggYo5srWpwQwgA84wAc.jpg',
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg48zlggYooPjXFTCADzjABw.jpg'
  ],
  CHometTit: [
    {
      titUp: '延续爱的希望',
      titUpe: 'HOPE FOR CONTINUED LOVE',
      titDown: '关注留守儿童',
      titDowne: 'PAY ATTENTION TO LEFT BEHIND CHILDREN'
    },
    {
      titUp: '让他们微笑起来',
      titUpe: 'MAKE THEM SMILE',
      titDown: '关注留守儿童',
      titDowne: 'PAY ATTENTION TO LEFT BEHIND CHILDREN'
    },
    {
      titUp: '延续爱的希望',
      titUpe: 'HOPE FOR CONTINUED LOVE',
      titDown: '关注留守儿童',
      titDowne: 'PAY ATTENTION TO LEFT BEHIND CHILDREN'
    },
    {
      titUp: '让他们微笑起来',
      titUpe: 'MAKE THEM SMILE',
      titDown: '关注留守儿童',
      titDowne: 'PAY ATTENTION TO LEFT BEHIND CHILDREN'
    }
  ],
  CAbout:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg6drmggYo-K3OhQIwgA848gI.jpg',
  CWelfare:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAgge7mggYokJ3H4gYwgA848gI.jpg',
  CContact:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg_u-mggYoiKXJxAMwgA848gI.jpg',
  CNews:
    'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAgqbnqggYosJ_yqwIwgA848gI.jpg'
}

watch(
  () => route.name,
  (newName: RouteRecordName | null | undefined) => {
    // 处理文章详情页
    // @ts-ignore
    if (newName.includes('CNews')) {
      currimgSrc.value = infoImgs['CNews']
    } else {
      // @ts-ignore
      currimgSrc.value = infoImgs[newName]
    }
    newName === 'CHome'
      ? (isShowCarousel.value = true)
      : (isShowCarousel.value = false)
    if (newName === 'CHome') {
      // 自动轮播
      timer.value = setInterval(() => {
        throttleSwitching()
      }, 5000)
    } else {
      clearInterval(timer.value)
    }
  },
  { immediate: true }
)

// 轮播图切换核心
const core = () => {
  // @ts-ignore
  targetBanner.value.style.transform = `translateX(-${currIndex.value * 100}vw)`
  // @ts-ignore
  targetBanner.value.style.transition = `1s`
  if (currIndex.value >= infoImgs.CHome.length - 1) {
    currIndex.value = 1
    setTimeout(() => {
      // @ts-ignore
      targetBanner.value.style.transform = `translateX(-${
        currIndex.value * 100
      }vw)`
      // @ts-ignore
      targetBanner.value.style.transition = `0s`
    }, 1000)
  }
  if (currIndex.value <= 0) {
    currIndex.value = infoImgs.CHome.length - 2
    setTimeout(() => {
      // @ts-ignore
      targetBanner.value.style.transform = `translateX(-${
        currIndex.value * 100
      }vw)`
      // @ts-ignore
      targetBanner.value.style.transition = `0s`
    }, 1000)
  }
}

// 轮播图切换
const switching = (type = true) => {
  if (type) {
    currIndex.value++
    core()
  } else {
    currIndex.value--
    core()
  }
}

// 节流处理
const throttleSwitching = throttle(switching, 1000)
</script>

<style scoped lang="less">
#header {
  position: relative;
  // 动画名称
  animation: fadeInDown;
  // 动画持续时间
  animation-duration: 1s;
  .content {
    display: flex;
    height: 100px;
    background: rgba(255, 255, 255, 0);
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    .left {
      color: #f13a3a;
      font-size: 30px;
      font-weight: 600;
      user-select: none;
      cursor: pointer;
      a {
        color: #fff;
        position: relative;
        &:hover {
          animation: rotateInUpLeft;
          animation-duration: 1s;
        }
      }
    }
    .right {
      display: flex;
      user-select: none;
      a {
        width: 100px;
        height: 100px;
        line-height: 100px;
        color: #c0c0c0;
        text-align: center;
        margin-right: 20px;
        &.router-link-exact-active {
          color: #f13a3a;
        }
      }
    }
  }
  .toggle {
    .btn {
      position: absolute;
      width: 70px;
      height: 70px;
      background-color: rgba(0, 0, 0, 0.2);
      top: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      i {
        color: #fff;
        font-size: 40px;
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
    .btn-left {
      left: 40px;
    }
    .btn-right {
      right: 40px;
    }
  }
  .banner {
    height: 370px;
    margin-top: -100px;
    z-index: -1;
    position: relative;
    img {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .bannerImg {
    width: 100%;
    height: 864px;
    position: relative;
    overflow: hidden;
    .bannerImgs {
      width: 100%;
      height: 100%;
      .banner-view {
        display: flex;
        height: 100%;
        position: relative;
        transform: translateX(-100vw);
        transition: all 1s;
        .banner-item {
          flex-shrink: 0;
          width: 100vw;
          height: 864px;
          position: relative;
          .tit {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-family: '宋体';
            .care {
              font-size: 220px;
              font-weight: 600;
              color: #f13a3a;
              left: -300px;
              top: -140px;
              position: relative;
            }
            .titupe {
              font-size: 18px;
              position: relative;
              left: -250px;
              top: -100px;
            }
            .titup {
              font-size: 45px;
              position: relative;
              left: -250px;
              top: -80px;
            }
            .titdown {
              font-size: 30px;
              position: relative;
              left: 450px;
              top: 30px;
            }
            .titdowne {
              font-size: 18px;
              position: relative;
              left: 400px;
              top: 50px;
            }
          }
          img {
            width: 120%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
